<template>
  <div>
    <ul>
      <li v-for="item in nav" :key="item.id" @click="componentName=item.component"> {{ item.title }} </li>
    </ul>
    <keep-alive include="Phone" exclude="Computer">
      <component :is="componentName"></component>
    </keep-alive>
  </div>
</template>

<script>
import Phone from "./Phone.vue";
import Computer from "./Computer.vue";
import Bike from "./Bike.vue";
import Cloth from "./Cloth.vue";
export default {
  components:{
    Phone, Computer, Bike, Cloth
  },
  data() {
    return {
      nav:[{
        id:"24554",
        title:"手机",
        component: "Phone"
      },{
        id:"asfsg",
        title:"电脑",
        component: "Computer"
      },{
        id:"55hdh",
        title:"自行车",
        component: "Bike"
      },{
        id:"o97a98ds6fgr",
        title:"衣服",
        component: "Cloth"
      }],
      componentName: "Phone"
    }
  },
}
</script>